<template>
  <div class="app-container">
    <el-descriptions :column="1" class="margin-top" title="订单详情" border>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户ID
        </template>
        {{ user.id }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户名
        </template>
        {{ user.username }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          用户类型
        </template>
        <div v-if="user.role === 1">
          <el-tag
            type="success"
            effect="dark">
            管理员
          </el-tag>
        </div>
        <div v-else>
          <el-tag
            type=""
            effect="dark">
            普通用户
          </el-tag>
        </div>
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          Email
        </template>
        {{ user.email }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          TEL
        </template>
        {{ user.phone }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          密保问题
        </template>
        {{ user.question }}
      </el-descriptions-item>

      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"/>
          密保答案
        </template>
        {{ user.answer }}
      </el-descriptions-item>

    </el-descriptions>
  </div>
</template>
<script>
import user from '@/api/mall/user'
export default {
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getUser(id)
      } else {
        this.user = {}
      }
    },
    getUser(id) {
      user.getUser(id)
        .then(response => {
          this.user = response.data.user
        })
    }
  }
}
</script>
